<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../../css/index.css">
  <link rel="shortcut icon" href="../../img/A.png"  type="image/x-icon">
  <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../../bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../../vue/jquery.min.js"></script>
  <script src="../../vue/vue.min.js"></script>
  <title>后台管理系统</title>
  <script src="../../echarts/echarts.min.js"></script>
</head>

<body>
<!-- 页面的起步 -->
<div class="container pt-5" style="font-family:'Times New Roman', Times, serif;">
  <div class="row">
    <!--页面导航栏列表 -->
    <div class="col-md-2">
      <!-- 网站logo -->
      <div class="mb-5 bg-light"
           style="font-family:fantasy;direction: ltr; position: fixed;z-index: 10; left: 65px; top: 38px;">
        <h3><img style=" width: 20%; height: 20%;" src="../../img/A.png"/><span>ArkanTv</span></h3>
      </div>

      <!-- 垂直导航栏 展示导航 -->
      <div class="col-md-2" style="position: fixed;top: 100px; overflow-y:auto;height: 80vh; direction:rtl;">
        <nav class="navbar bg-light" style="direction: ltr;">
          <div class="container-fluid">
            <ul class="nav nav-pills flex-column text-start">
              <li class="nav-item mb-2">
                <a class="nav-link" href="index.html"><i class="bi bi-text-indent-left"></i><span
                        class="m-3">统计</span></a>
              </li>
              <li class="nav-item mb-2">
                <a class="nav-link" href="movie"><i class="bi bi-camera-video"></i><span
                        class="m-3">电影</span></a>
              </li>

              <li class="nav-item mb-2">
                <a class="nav-link" href="of_play"><i class="bi bi-play-btn"></i><span
                        class="m-3">短视频</span></a>
              </li>

              <li class="nav-item mb-2">
                <a class="nav-link active" href="user"><i class="bi bi-person-add"></i><span
                        class="m-3">用户管理</span></a>
              </li>

              <li class="nav-item mb-2">
                <a aria-current="page" class="nav-link" href="coin"><i
                        class="bi bi-coin"></i><span
                        class="m-3">会员金额</span></a>
              </li>

              <li class="nav-item mb-2">
                <a aria-current="page" class="nav-link" href="prizes"><i
                        class="bi bi-cash-stack"></i><span
                        class="m-3">抽奖礼品</span></a>
              </li>

              <li class="nav-item mb-2">
                <a aria-current="page" class="nav-link" href="selection"><i
                        class="bi bi-signpost-split"></i><span
                        class="m-3">导航列表</span></a>
              </li>

            </ul>
          </div>
        </nav>
      </div>

    </div>

    <!-- 页面的col-10部分 -->
    <div class="col-md-10 pb-5" style="z-index: 10;" id="openApp">
      <!-- 日期 / 搜索 -->
      <div class="row">
        <div class="col-md-5">

          <!-- 当前日期 -->
          <div class="text-start">
            <h3>当前日期</h3>
            <p style="font-family:fantasy;">{{currentDate}}</p>
          </div>
        </div>

        <!-- 搜索框 -->
        <div class="col-md-4">
          <form>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="输入关键字...">
              <span class="input-group-text"><button type="button" class="btn  btn-sm"><i
                    class="bi bi-search"></i></button></span>
            </div>
          </form>
        </div>

        <!-- 登录图标-->
        <div class="col-md-3 text-end">
          <span>ArTv10001</span>
          <img src="../../img/tu2.jpg" style="border-radius: 100%; width: 65px; height: 65px;"/>
        </div>
      </div>


      <!-- 本站导航栏 -->
      <div class="row">
        <div class="col-md-12">

          <!-- 导航 -->
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link active" data-bs-toggle="pill" href="#home">主页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="pill" href="#menu1">会员充值</a>
            </li>
          </ul>

          <!-- 跟导航切换 -->
          <div class="tab-content" >
            <!--            提示框-->
            <div v-show="isMessage" style="position: fixed;z-index: 10;top: 20px; left: 50%"
                 class="col-md-2 bg-primary p-1 text-center text-white rounded-1"><b v-text="message"></b>
            </div>
            <!-- 电影主页 -->
            <div class="tab-pane container active text-center " id="home">
              <!--         加载动画-->
              <div class="spinner" v-show="load">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
              </div>
              <!-- 查询导航 -->
              <div class="row">
                <div class="col"><select v-model="selectedOption"
                                         class="form-select">
                  <option v-for="option in options" :key="option.value" :value="option.value">
                    {{ option.text }}
                  </option>
                </select></div>
                <div class="col"><select class="form-select">
                  <option>语言分类</option>
                  <option>字幕电影</option>
                  <option>语言电影</option>
                </select></div>
                <div class="col"><select class="form-select">
                  <option>付费类型</option>
                  <option>免费</option>
                  <option>会员</option>
                  <option>付费</option>
                </select></div>
              </div>
              <!-- 分类展示 -->
              <div class="row mt-3 text-center">
                <div class="col-md-1">
                  <b>ID</b>
                </div>
                <div class="col-md-1">
                  <b>头像</b>
                </div>
                <div class="col-md-2">
                  <b>用户名</b>
                </div>
                <div class="col-md-3">
                  <b>OpenID</b>
                </div>
                <div class="col-md-3">
                  <b>SessionID</b>
                </div>
                <div class="col-md-1">
                  <b>身份</b>
                </div>
                <div class="col-md-1">
                  <b style="font-size: 13px">VIP余时</b>
                </div>
              </div>
              <!-- 分类内容 -->
              <div class="row pt-2 nav-item" style="font-size: 15px; =" v-for='videos in video'>
                <div class="col-md-1">
                  <p v-text="videos.id"></p>
                </div>
                <div class="col-md-1">
                  <img v-bind:src="videos.userImg" style="width: 60px; height: 30px;"/>
                </div>
                <div class="col-md-2">
                  <p v-text="videos.username">ئانامنىڭ كۆز يىشى</p>
                </div>
                <div class="col-md-3">
                  <p v-text="videos.openId">经营律师</p>
                </div>
                <div class="col-md-3">
                  <p v-text="videos.sessionId">ئامرىكا</p>
                </div>
                <div class="col-md-1">
                  <p v-text="videos.status">جىنايەت</p>
                </div>
                <div class="col-md-1">
                  <p v-text="videos.time">ھەقسىز</p>
                </div>

              </div>
              <!-- 分页 -->
              <div class="row mt-3">
                <div class="col">
                  <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#"
                                             v-on:click.prevent="openApp(next.prePage)"><i
                          class="bi bi-caret-left-fill"></i></a>
                    </li>
                    <a class="page-item page-link" href="#"
                       v-for="n in next.navigatepageNums" v-text="n"
                       v-on:click.prevent="openApp(n)"
                       v-bind:class="{'bg-primary text-light':n === next.pageNum}">1</a>


                    <li class="page-item"><a class="page-link" href="#"
                                             v-on:click.prevent="openApp(next.nextPage)"><i
                          class="bi bi-caret-right-fill"></i></a>
                    </li>
                  </ul>
                </div>
              </div>

            </div>
            <!-- 充会员部分 -->
            <div class="tab-pane container fade" id="menu1">

              <!-- 相关电影的封面与相关video -->
              <div class="row mt-3">
                <div class="col">
                  <img v-bind:src="movie.userImg" style="width: 100%; height: 250px; border-radius: 15px;"/>
                </div>
              </div>
              <form>
                <!-- 标题 -->
                <div class="row">
                  <!-- ID-->
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <input @input="handleInput" type="text" class="form-control" id="Id"
                             placeholder="Enter email"
                             name="videoId">
                      <label for="id">ID</label>
                    </div>
                  </div>
                  <!-- 维标题 -->
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <input type="text" v-model="movie.username" class="form-control" id="weibiao"
                             placeholder="Enter email"
                             name="email">
                      <label for="weibiao">用户名:</label>
                    </div>
                  </div>
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <select class="form-select" v-model="statusCreate" id="leixing1" name="sellist">
                        <option v-bind:value="res.id" v-for="res in Month" v-text="res.name">VIP·帧享</option>
                      </select>
                      <label for="leixing1">开通期限:</label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <!-- ID-->
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <input type="text" class="form-control" v-model="movie.status" placeholder="Disabled input" disabled>
                      <label for="id">当前身份:</label>
                    </div>
                  </div>
                  <!-- 维标题 -->
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <input type="text" class="form-control" v-model="movie.time" id="weibiao" disabled>
                      <label for="weibiao">会员余时:</label>
                    </div>
                  </div>
                  <div class="col nav-item">
                    <div class="form-floating mb-3 mt-3">
                      <input type="text" class="form-control" v-model="movie.openId" id="weibiao" disabled>
                      <label for="weibiao">OpenID:</label>
                    </div>
                  </div>
                </div>
                <!-- 提交按钮 -->
                <div class="d-grid gap-3 pt-3 pb-3">
                  <button type="button" @click="handleSubmit" class="btn btn-primary btn-block">
                    <span :class="loading === 1 ? 'spinner-border spinner-border-sm' : ''"></span>  提交</button>
                </div>
              </form>
            </div>

          </div>

        </div>

      </div>
    </div>
  </div>
</div>
</div>


</body>

<script src="../../js/utils.js"></script>
<script src="../../js/setUser.js"></script>
</html>